import React from 'react';
import { Layout, Menu, Button } from 'antd';
// import '../../css/Main.less'

/**
 * Main：实现菜单模式（横向与纵向）的切换
 */
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;

class Main extends React.Component {

    state = {
        mode: 'horizontal',  //mode：菜单类型
        collapsed: true, //当前收起状态
        collapsedWidth: 0,
        children: [
            {
                displayNameCn: "FMEA",
                childrenT: [
                    {
                        displayNameCn: "Search",
                        displayNameEn: "Search",
                        name: "Search"
                    },
                    {
                        displayNameEn: "Search2",
                        displayNameCn: "Search2",
                        name: "Search2"
                    },
                    {
                        displayNameCn: "SearchCreateFMEA",
                        displayNameEn: "SearchCreateFMEA",
                        name: "SearchCreateFMEA"
                    }
                ]
            },
            {
                displayNameCn: "OPL",
                childrenT: [
                    {
                        displayNameCn: "oplSearch1",
                        displayNameEn: "oplSearch12",
                        name: "oplSearch1"
                    },
                    {
                        displayNameCn: "oplSearch2",
                        displayNameEn: "oplSearch2",
                        name: "oplSearch2"
                    }
                ]

            }]
    }

    // 菜单切换
    changeMode = () => {
        this.setState((preState) => ({
            mode: preState.mode === 'horizontal' ? 'inline' : 'horizontal',
            
            collapsed: !this.state.collapsed,
        }))
        console.log(this.state.mode, this.state.collapsed)

    };

    getSiderData() {
        let { mode, children } = this.state;
        return (
            <Menu key={'menu'} mode={mode}>
                {
                    children.map((item) => {
                        return <SubMenu style={{ padding: '10px' }} key={item.displayNameCn} title={item.displayNameCn}>
                            {
                                item.childrenT && item.childrenT.map(items => {
                                    return <Menu.ItemGroup key={items.name}>
                                        <Menu.Item>{items.name}</Menu.Item>
                                    </Menu.ItemGroup>
                                })
                            }
                        </SubMenu>
                    })
                }
            </Menu >
        )
    }

    render() {
        let {  mode } = this.state;
        return (
            <Layout>
                <Button type="primary" onClick={() => this.changeMode()}>button</Button>
                <Header>
                    <div>这是个头部</div>
                </Header>
                {/* {
                    mode !== 'inline' ? <div>
                        {this.getSiderData()}
                    </div> : null
                } */}
                <Content>
                    <Layout>
                        {
                            mode === 'inline' ?
                                <Sider>
                                    <div>
                                        {this.getSiderData()}
                                    </div>
                            </Sider> :
                            <div>
                                {this.getSiderData()}
                            </div>
                        }
                        <Content style={{paddingTop: 100}}>
                            Content11
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
    }

}


export default Main